<template>
    <div id="userInfoMsg">
        <!--后退-->
        <img class="back" style=""src="../../../assets/homepage/back.png" alt="" onclick="history.go(-1)">
         <!--裁剪-->
         <div class="container" v-show="panel">  
            <div style="height:100%;width:100%;">  
               <img style="width:100%;height:100%;" id="image" :src="url" alt="Picture">  
            </div>  
            <div class="cutImg">
                <button style="position:absolute;top:0;left:0;z-index:111;margin-top:0.5rem;" type="button" id="button" @click="noCrop">
                <img src="../../../assets/me/myMessageNo.png" alt=""></button>  
                <button type="button" id="button" @click="crop"><img src="../../../assets/me/myMessage.png" alt=""></button>  
            </div>
         </div>  
         <!--头部个人显示信息-->
          <div class="userHead">
              <div class="perHeader">
                  <div class="perheaderImg" :style="'backgroundImage:url('+myUserData.headPortrait+')'">
                      <button @click="goUpload()" style="width:3rem;height:3.5rem;background-color:transparent"></button>
                      <input style="display:none;" type="file" ref="file" id="change" accept="image" @change="fileChange">
                  </div>
                  <p class="userGender" style="">
                      <span>{{myUserData.nickName}}</span>&nbsp;&nbsp;
                      <img src="../../../assets/homepage/male.png" alt="" v-if="myUserData.sex=='1'">
                      <img src="../../../assets/homepage/women.png" alt="" v-else>
                  </p>
                  <p style="font-size:12px;margin-top:0.3rem">信用度 {{myUserData.creditDegree}}分</p>
                  <p class="perStart">
                        <img v-for="item in total" src="../../../assets/tabber/starHav.png" alt="">
                        <img v-for="item in untotal" src="../../../assets/tabber/unstarHav.png" alt="">
                  </p>
              </div>
         </div>
         <!--个人信息显示-->
         <div class="perBodyshow">
             <section>
                <img src="../../../assets/me/myMessageIconMine.png" alt=""><p>415548261222512</p>
             </section>
             <section>
                 <img src="../../../assets/me/myMessageIconCard.png" alt=""><p>{{myUserData.phoneNumber}}</p>
             </section>
             <section>  
                  <img src="../../../assets/me/myMessageName.png" alt=""><p>{{myUserData.realName}}</p>
             </section>
         </div>
          <section class="perAddress">
              <div> 
                  <img src="../../../assets/me/myMessageWord.png" alt="">
                  <p>{{myUserData.nickName}} <span v-if="myUserData.sex=='1'">男</span><span v-else>女</span></p>
              </div>
              <img  @click="alterNick" src="../../../assets/me/goTO.png" alt="">
          </section> 
          <div class="pershowBod">
                <div>
                     <img src="../../../assets/me/myMessageHome.png" alt="">
                     <div>
                          <p>{{myUserData.schoolName}}</p>
                         <p>{{myUserData.faculty}}</p>
                         <p>{{myUserData.buildingNo}}#{{myUserData.dormNo}}</p>
                     </div>
                </div>
                 <img @click="alterInfo" style="width:0.75rem;height:1.35rem;" src="../../../assets/me/goTO.png" alt="">
          </div>
          <!--修改昵称-->
          <div id="nickWindow" style="display: none;">
          </div>
          <div id="nickLayer" style="display: none;">
              <p>修改昵称<img @click="closeNick()" src="../../../assets/tabber/chanel.png" alt=""></p>
              <p><input v-model="myUserData.nickName" maxlength="10" type="text" placeholder="请输入昵称（最多10字符）"></p> 
              <p>修改性别</p>
              <div>
                  <select v-model="myUserData.sex">
                     <option value="1">男</option>
                     <option value="2">女</option>
                  </select>
              </div>
              <p class="determine" @click="changeNickSex">确定</p>
          </div>  
          <!--修改信息-->
          <div id="infoWindow" style="display: none;">  
          </div>
          <div id="infoLayer" style="display: none;">
              <p class="infoPOne">修改学校<img @click="closeInfo()" src="../../../assets/tabber/chanel.png" alt=""></p>
              <select style="width:80%;height:2rem;border: 1px solid #29a193;border-radius:10px;padding:0 1rem;margin: 0.5rem 1.5rem;">
                    <option value="item.id" v-for="item in allSchool">{{ item.name }}</option>
              </select>
              <p class="infoPThree">修改学院</p>
              <p class="infoPFour"><input v-model="myUserData.faculty" type="text" placeholder="请输入学院名称（最多10字符）"></p> 
              <section>
                  <p><input v-model="myUserData.buildingNo" type="text" placeholder="楼号"></p>
                  <p><input v-model="myUserData.dormNo" type="text" placeholder="宿舍号"></p>
              </section>
              <p class="determine" @click="changeNickSex">确定</p> 
          </div> 
    </div>
</template>
<script>  
import Cropper from 'cropperjs'  
export default {  
  components: {  
  },  
  data () {  
    return {  
        total:undefined,
        untotal:undefined,
        allSchool:undefined,
        totalStar:4,
        myUserData:{},
        picValue:'',  
        cropper:'',  
        croppable:false,  
        panel:false,  
        url:''  ,
        options: [
            {name:'男' ,id:'0'},
            {name:'女' ,id:'1'},
        ]
    }  
  },  
  mounted () {  
    //初始化这个裁剪框  
    var self = this;  
    var image = document.getElementById('image');  
    this.cropper = new Cropper(image, {  
      aspectRatio: 1,  
      viewMode: 1,  
      background:false,  
      zoomable:false,  
      ready: function () {  
        self.croppable = true;  
      }  
    });  
  },  
  created(){
      this.getAllschool()
      this.getCurrentUser()
  },
  methods: {  
    // 查询所有学校
    getAllschool(){
         this.$api.getAllSchool().then((res)=>{
              if(res.code == '000000'){
                  this.allSchool = res.data
              }
          })
    },
     // 修改地址
     changeNickSex(){
        this.$api.changeUserMess(this.myUserData).then((res)=>{
              if(res.code == '000000'){
                  this.myUserData = res.data
              }
          })
           document.getElementById('infoWindow').style.display = 'none';  
        document.getElementById('infoLayer').style.display = 'none';  
           document.getElementById('nickWindow').style.display = 'none';  
        document.getElementById('nickLayer').style.display = 'none';
    },
    
      // 获取个人信息
     getCurrentUser(){
           this.$api.currUser().then((res)=>{
              if(res.code == '000000'){
                    this.myUserData = res.data
                    this.total=this.myUserData.totalStar
                    this.untotal = 5-Number(this.total)
              }
          })
      },
    goUpload(){
        this.$refs.file.click()
    },
    fileChange (e) {  
        let files = e.target.files || e.dataTransfer.files;  
        if (!files.length) return;  
        this.panel = true;  
        this.picValue = files[0];  
            
        this.url = this.getObjectURL(this.picValue);  
        //每次替换图片要重新得到新的url  
        if(this.cropper){  
            this.cropper.replace(this.url);  
        }  
        this.panel = true;  
    },  
    getObjectURL (file) {  
      var url = null ;   
      if (window.createObjectURL!=undefined) { // basic  
        url = window.createObjectURL(file) ;  
      } else if (window.URL!=undefined) { // mozilla(firefox)  
        url = window.URL.createObjectURL(file) ;  
      } else if (window.webkitURL!=undefined) { // webkit or chrome  
        url = window.webkitURL.createObjectURL(file) ;  
      }  
      return url ;  
    },  
    noCrop(){
      this.panel = false;  
    },
    crop () {  
        this.panel = false;  
        var croppedCanvas;  
        var roundedCanvas;  
        if (!this.croppable) {  
          return;  
        }  
        // Crop  
        croppedCanvas = this.cropper.getCroppedCanvas(); 
        // Round  
        roundedCanvas = this.getRoundedCanvas(croppedCanvas);  
        this.myUserData.headPortrait = roundedCanvas.toDataURL();  
        this.$api.uploadHeadImg({fileStr:this.myUserData.headPortrait}).then((res)=>{
              if(res.code == '000000'){
                  this.myUserData.headPortrait = res.data
                  var obj = {};
                  obj.id = this.myUserData.id
                  obj.headPortrait = res.data.file
                  console.log('8888和规范续费续费的')
                  console.log(obj)
                   this.$api.changeUserMess(obj).then((res)=>{
              if(res.code == '000000'){
                 
                this.myUserData = res.data
                // console.log('11111')
                // console.log(this.myUserData)
              }
          })
                
              }
          })
        // this.postImg()
    },  
    getRoundedCanvas (sourceCanvas) {  
        var canvas = document.createElement('canvas');  
        var context = canvas.getContext('2d');  
        var width = sourceCanvas.width;  
        var height = sourceCanvas.height;  
        canvas.width = width;  
        canvas.height = height;  
        context.imageSmoothingEnabled = true;  
        context.drawImage(sourceCanvas, 0, 0, width, height);  
        context.globalCompositeOperation = 'destination-in';  
        context.beginPath();  
        context.arc(width / 2, height / 2, Math.min(width, height) / 2, 0, 2 * Math.PI, true);  
        context.fill();  
        return canvas;
    },  
    // postImg () {  
    //   //这边写图片的上传  
    //   const obj = {};
    //   obj.id = this.myUserData.id
    //   obj.headPortrait = this.myUserData.headPortrait
    //   console.log('GGGGGGGGGGGGGGGG')
    //   console.log(obj)
    //   this.$api.changeUserMess(obj).then((res)=>{
    //           if(res.code == '000000'){
                 
    //             this.myUserData = res.data
    //             // console.log('11111')
    //             // console.log(this.myUserData)
    //           }
    //       })
    // },
    alterNick(){  
        document.getElementById('nickWindow').style.display = 'block';  
        document.getElementById('nickLayer').style.display = 'block';        
    },
    alterInfo(){
        document.getElementById('infoWindow').style.display = 'block';  
        document.getElementById('infoLayer').style.display = 'block';
    },
    closeNick() {  
        document.getElementById('nickWindow').style.display = 'none';  
        document.getElementById('nickLayer').style.display = 'none';  
    },
    closeInfo() {  
        document.getElementById('infoWindow').style.display = 'none';  
        document.getElementById('infoLayer').style.display = 'none';  
    },
    
  }  
}  
</script>  
  
<style>
#userInfoMsg{
    height:100%;
    width:100%;
    background-color:#fff;
}
#userInfoMsg .back{
    position:fixed;
    height:1rem;
    width:0.6rem;
    top:1rem;
    left:0.6rem;
}
#userInfoMsg .userHead{
    width:100%;
    background-size:100% 100%;
    background-image:url(../../../assets/me/userInfoBg.png);
}
#userInfoMsg .perBodyshow{
    margin-top:1.5rem;
    background-color:white;
    color:rgb(138,138,138);
    font-size:0.8rem;
}

#userInfoMsg .perAddress{
    font-size:0.8rem;
    color:rgb(138,138,138);
    display:flex;
    padding:0 1.35rem;
    background-color:white;
    height:2.5rem;
    justify-content:space-between;
    align-items:center;
}
#userInfoMsg .perAddress > div{
   display:flex;
   align-items:center;
}
#userInfoMsg .perAddress > div > img{
  width:1.5rem;
  height:1.5rem;
  display:inline-block;
  margin-right:1.5rem;
}
#userInfoMsg .perAddress > img{
  width:0.5rem;
  height:1rem;
}
#userInfoMsg .pershowBod{
    height:6rem;
    padding:0 1.35rem;
    justify-content:space-between;
     display:flex;
     align-items:center;
     background-color:white;
     margin-top:1.05rem;
     font-size:0.8rem;
     color:rgb(138,138,138);
}
#userInfoMsg .pershowBod > div{
    display:flex;
}
#userInfoMsg .pershowBod > div > div{
    position:relative;
    top:0.5rem;
    left:1rem;
}
#userInfoMsg .pershowBod p{
    margin:0.5rem;
}
#userInfoMsg .pershowBod img{
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
    margin-top:1rem;
}
#userInfoMsg .perBodyshow section{
    display:flex;
    align-items:center;
    padding:0 1.35rem;
    height:2.5rem;
    border-bottom:3px solid rgb(248,248,248);
}
#userInfoMsg .perBodyshow img{
    margin-right:1.5rem;
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
}
#userInfoMsg .perStart{
    width:40%;
    margin:auto;
    display:flex;
    justify-content:space-between;
}
#userInfoMsg .perStart img{
    width:1rem;
    height:1rem;
}
#userInfoMsg .perHeader{
    padding-top:1.5rem;
    padding-bottom:2rem;
    line-height:1.2rem;
    text-align:center;
    margin:0 auto 0 auto;
}
#userInfoMsg .perHeader p{
    text-align:center;
    color:white;
    font-size:0.9rem;
}
#userInfoMsg  .perHeader .userGender {
    position:relative;
    left:0;
    top:0.3rem;
}
#userInfoMsg  .perHeader .userGender > img{
    height:1rem;
}
#userInfoMsg .perheaderImg{
    margin:0 auto;
    width:4rem;
    height:4rem;
    border:3px solid white;
    border-radius:50%;
    overflow:hidden;
    background-size:100% 100%;
}
#userInfoMsg  .perHeader .userGender {

}
#userInfoMsg .perheaderImg img{
    height:4rem;
    width:4rem;
}
#userInfoMsg{
     height:100%;
     width:100%;
     background-color:#F8F8F8;
}
#userInfoMsg .depbackImg{
    position:absolute;
    top:0.7rem;
    left:0.7rem;
    z-index:1;
    width:0.5rem;
    height:0.75rem;
}
#userInfoMsg .pfbackHead{
    height:9rem;
    width:100%;
}

#userInfoMsg  #button {  
  position: absolute;  
  z-index:1111;
  right: 0.5rem;  
  top: 0.5rem;  
  width: 4rem;  
  height: 2rem;  
  border:none;  
  border-radius: 5px;  
  background:none;  
}  
#userInfoMsg  #button img{
   height:2.35rem;
   width:2.35rem;
 }
#userInfoMsg  .show {  
  width: 5rem;  
  height: 5rem;  
  overflow: hidden;  
  position: relative;  
  border-radius: 50%;  
  border: 1px solid #d5d5d5;  
}  
#userInfoMsg  .picture {  
  width: 100%;  
  height: 100%;  
  overflow: hidden;  
  background-position: center center;  
  background-repeat: no-repeat;  
  background-size: cover;   
}  

#userInfoMsg  .container {  
    width:100%;
    height:100%;
    z-index: 99;  
    position: fixed;  
    left: 0;  
    top: 0;  
    right: 0;  
    bottom: 0;  
    background:rgba(0,0,0,1);  
}  
#userInfoMsg  .container .cutImg{

}
#userInfoMsg  #image {  
  max-width: 100%;  
}  
  
#userInfoMsg  .cropper-view-box,.cropper-face {  
  border-radius: 50%;  
}  
/*!  
 * Cropper.js v1.0.0-rc  
 * https://github.com/fengyuanchen/cropperjs  
 *  
 * Copyright (c) 2017 Fengyuan Chen  
 * Released under the MIT license  
 *  
 * Date: 2017-03-25T12:02:21.062Z  
 */  
  
#userInfoMsg  .cropper-container {  
  font-size: 0;  
  line-height: 0;  
  height:100%;
  width:100%;
  position: relative;  
  
  -webkit-user-select: none;  
  
     -moz-user-select: none;  
  
      -ms-user-select: none;  
  
          user-select: none;  
  
  direction: ltr;  
  -ms-touch-action: none;  
      touch-action: none  
}  
  
#userInfoMsg  .cropper-container img {  
  /* Avoid margin top issue (Occur only when margin-top <= -height) */  
  display: block;  
  min-width: 0 !important;  
  max-width: none !important;  
  min-height: 0 !important;  
  max-height: none !important;  
  width: 100%;  
  height: 100%;  
  image-orientation: 0deg  
}  
  
.cropper-wrap-box,  
.cropper-canvas,  
.cropper-drag-box,  
.cropper-crop-box,  
.cropper-modal {  
    height:100%;
    width:100%;
  position: absolute;  
  top: 0;  
  right: 0;  
  bottom: 0;  
  left: 0;  
}  
  
#userInfoMsg  .cropper-wrap-box {  
  overflow: hidden;  
}  
  
#userInfoMsg  .cropper-drag-box {  
  opacity: 0;  
  background-color: #fff;  
}  
  
#personInformation .cropper-modal {  
  opacity: 0.9;  
  background-color: white;  
}  
#userInfoMsg .cropper-view-box {  
  display: block;  
  overflow: hidden;  
  
  width: 100%;  
  height: 100%;  
  
  outline: 0.05rem solid #39f;  
  outline-color: rgba(51, 153, 255, 0.75);  
}  
  
#userInfoMsg  .cropper-dashed {  
  position: absolute;  
  
  display: block;  
  
  opacity: .5;  
  border: 0 dashed #eee  
}  
  
#userInfoMsg  .cropper-dashed.dashed-h {  
  top: 33.33333%;  
  left: 0;  
  width: 100%;  
  height: 33.33333%;  
  border-top-width: 0.05rem;  
  border-bottom-width: 0.05rem  
}  
  
#userInfoMsg  .cropper-dashed.dashed-v {  
  top: 0;  
  left: 33.33333%;  
  width: 33.33333%;  
  height: 100%;  
  border-right-width: 0.05rem;  
  border-left-width: 0.05rem  
}  
  
#userInfoMsg  .cropper-center {  
  position: absolute;  
  top: 50%;  
  left: 50%;  
  
  display: block;  
  
  width: 0;  
  height: 0;  
  
  opacity: .75  
}  
  
#userInfoMsg .cropper-center:before,  
  .cropper-center:after {  
  position: absolute;  
  display: block;  
  content: ' ';  
  background-color: #eee  
}  
  
#userInfoMsg .cropper-center:before {  
  top: 0;  
  left: -0.15rem;  
  width: 0.35rem;  
  height: 0.05rem  
}  
  
#userInfoMsg .cropper-center:after {  
  top: -0.15rem;  
  left: 0;  
  width: 0.05rem;  
  height: 0.35rem  
}  
  
.cropper-face,  
.cropper-line,  
.cropper-point {  
  position: absolute;  
  
  display: block;  
  
  width: 100%;  
  height: 100%;  
  
  opacity: .1;  
}  
  
#userInfoMsg  .cropper-face {  
  top: 0;  
  left: 0;  
  
  background-color: #fff;  
}  
  
#userInfoMsg  .cropper-line {  
  background-color: #39f  
}  
  
#userInfoMsg  .cropper-line.line-e {  
  top: 0;  
  right: -0.15rem;  
  width: 0.25rem;  
  cursor: e-resize  
}  
  
#userInfoMsg .cropper-line.line-n {  
  top: -0.15rem;  
  left: 0;  
  height: 0.25rem;  
  cursor: n-resize  
}  
  
#userInfoMsg .cropper-line.line-w {  
  top: 0;  
  left: -0.15rem;  
  width: 0.25rem;  
  cursor: w-resize  
}  
  
#userInfoMsg .cropper-line.line-s {  
  bottom: -0.15rem;  
  left: 0;  
  height: 0.25rem;  
  cursor: s-resize  
}  
  
#userInfoMsg  .cropper-point {  
  width: 0.25rem;  
  height: 0.25rem;  
  
  opacity: .75;  
  background-color: #39f  
}  
  
#userInfoMsg  .cropper-point.point-e {  
  top: 50%;  
  right: -0.15rem;  
  margin-top: -0.15rem;  
  cursor: e-resize  
}  
  
#userInfoMsg  .cropper-point.point-n {  
  top: -0.15rem;  
  left: 50%;  
  margin-left: -0.15rem;  
  cursor: n-resize  
}  
  
#userInfoMsg  .cropper-point.point-w {  
  top: 50%;  
  left: -0.15rem;  
  margin-top: -0.15rem;  
  cursor: w-resize  
}  
  
#userInfoMsg .cropper-point.point-s {  
  bottom: -0.15rem;  
  left: 50%;  
  margin-left: -0.15rem;  
  cursor: s-resize  
}  
  
#userInfoMsg .cropper-point.point-ne {  
  top: -0.15rem;  
  right: -0.15rem;  
  cursor: ne-resize  
}  
  
#userInfoMsg .cropper-point.point-nw {  
  top: -0.15rem;  
  left: -0.15rem;  
  cursor: nw-resize  
}  
  
#userInfoMsg .cropper-point.point-sw {  
  bottom: -0.15rem;  
  left: -0.15rem;  
  cursor: sw-resize  
}  
  
#userInfoMsg .cropper-point.point-se {  
  right: -0.15rem;  
  bottom: -0.15rem;  
  width: 1rem;  
  height: 1rem;  
  cursor: se-resize;  
  opacity: 1  
}  
  
@media (min-width: 38.4rem) {  
  
  .cropper-point.point-se {  
    width: 0.75rem;  
    height: 0.75rem  
  }  
}  
  
@media (min-width: 49.6rem) {  
  
  .cropper-point.point-se {  
    width: 0.5rem;  
    height: 0.5rem  
  }  
}  
  
@media (min-width: 60rem) {  
  
  .cropper-point.point-se {  
    width: 0.25rem;  
    height: 0.25rem;  
    opacity: .75  
  }  
}  
  
#userInfoMsg .cropper-point.point-se:before {  
  position: absolute;  
  right: -50%;  
  bottom: -50%;  
  display: block;  
  width: 200%;  
  height: 200%;  
  content: ' ';  
  opacity: 0;  
  background-color: #39f  
}  
  
#userInfoMsg .cropper-invisible {  
  opacity: 0;  
}  
  
#userInfoMsg .cropper-bg {  
  background-image: url('');  
}  
  
#userInfoMsg .cropper-hide {  
  position: absolute;  
  
  display: block;  
  
  width: 0;  
  height: 0;  
}  
  
#userInfoMsg .cropper-hidden {  
  display: none !important;  
}  
  
#userInfoMsg .cropper-move {  
  cursor: move;  
}  
  
#userInfoMsg .cropper-crop {  
  cursor: crosshair;  
}  
  
.cropper-disabled .cropper-drag-box,  
.cropper-disabled .cropper-face,  
.cropper-disabled .cropper-line,  
.cropper-disabled .cropper-point {  
  cursor: not-allowed;  
} 

#userInfoMsg #nickWindow,#infoWindow{  
    background-color:#4c4c4c;  
    width: 100%;  
    height: 100%;  
    left: 0;  
    top: 0;  
    filter: alpha(opacity=50);  
    opacity: 0.5;  
    z-index: 1;  
    position: absolute;       
}  
#userInfoMsg  #nickLayer{   
    width: 84%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2;
    border-radius:13px;
    position: absolute; 
    font-size:0.8rem;
} 
#userInfoMsg  #nickLayer p:nth-child(1){
    width:85%;
    height:1.75rem;
    margin:0.5rem auto;
    line-height:2.25rem;
    color:#29a193;
    
}
#userInfoMsg  #nickLayer p:nth-child(1) img{
    width:1rem;
    height:10x;
    float:right;
    margin-top:0.5rem;
}
#userInfoMsg  #nickLayer > p:nth-child(2){
    width:80%;
    margin:auto;
    height:1.75rem;
    line-height:1.75rem;
    padding:0px 0.75rem;
    border:1px solid #29a193;
    border-radius:8px;color:#888888;
}
#userInfoMsg  #nickLayer > p:nth-child(2) input{
    width:100%;
    padding:0.25rem;
}
#userInfoMsg  #nickLayer p:nth-child(3){
    width:85%;
    height:1.75rem;
    margin:0.5rem auto;
    line-height:2.25rem;
    color:#29a193;
}
#userInfoMsg  #nickLayer > div{
    width:80%;
    margin:auto;
    border-radius: 8px;
    border:1px solid #29a193;
    position: relative;
}
#userInfoMsg  #nickLayer > div > select{
    border: none;
    outline: none;
    width: 100%;
    height:1.75rem;
    line-height: 1.75rem;
    border-radius: 8px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    color:#888888;
    padding-left: 0.75rem;
}
#userInfoMsg  #nickLayer > div::after{
    content: "";
    width: 1.2rem;
    height: 0.65rem;
    background: url(../../../assets/me/next-D.png) no-repeat center;
    position: absolute;
    right: 1rem;
    top: 35%;
    pointer-events: none;
}
#userInfoMsg  #nickLayer .determine{
    width:25%;
    margin:1rem auto;
    background:#29a193;
    height:1.75rem;
    line-height:1.75rem;
    border-radius:8px;
    text-align:center;
    color:#fff;
}
#userInfoMsg  #infoLayer{   
    width: 84%;
    background:#ffffff;  
    left: 8%;  
    top: 30%;
    color:#000;  
    z-index: 2; 
    font-size:0.75rem;
    border-radius:13px;
    position: absolute;  
} 
#userInfoMsg  #infoLayer .infoPOne{
    width:85%;
    height:1.75rem;
    margin:0.5rem auto;
    line-height:2.25rem;
    color:#29a193;
}
#userInfoMsg  #infoLayer .infoPOne img{
    width:1rem;
    height:10x;
    float:right;
    margin-top:0.5rem;
}
#userInfoMsg  #infoLayer .infoPTwo{
    width:80%;
    margin:0.25rem 0px 0px 1.5rem;
    height:1.75rem;
    line-height:1.75rem;
    padding:0px 0.75rem;
    border:1px solid #29a193;
    border-radius:8px;color:#888888;
}
#userInfoMsg  #infoLayer .infoPTwo input{
    width:100%;
    padding:0.25rem;
}
#userInfoMsg  #infoLayer .infoPThree{
    width:85%;
    height:1.75rem;
    margin:0.5rem auto;
    line-height:2.25rem;
    color:#29a193;
    
}
#userInfoMsg  #infoLayer .infoPFour{
    width:80%;
    margin:0.25rem 0px 0px 1.5rem;
    height:1.75rem;
    line-height:1.75rem;
    padding:0px 0.75rem;
    border:1px solid #29a193;
    border-radius:8px;color:#888888;
}
#userInfoMsg  #infoLayer .infoPFour input{
    width:100%;
    padding:0.25rem;
}
#userInfoMsg  #infoLayer section{
    width:80%;
    margin:1.25rem 0px 0px 1.5rem;
    display:flex;
    justify-content:space-between;
}
#userInfoMsg  #infoLayer section > p{
  height:1.75rem;
  width:40%;
  padding:0px 0.25rem;
  line-height:1.75rem;
  border:1px solid #29a193;
  border-radius:8px;
}
#userInfoMsg  #infoLayer section > p > input{
  width:100%;
  text-align:center;
}
#userInfoMsg  #infoLayer .determine{
  width:25%;
  background:#29a193;
  height:1.75rem;
  line-height:1.75rem;
  border-radius:8px;
  margin:1rem auto;
  text-align:center;
  color:#fff;
}
</style>